<template>
    <div style="display: inline">
        <el-form-item v-bind="cpBindProps">
            <template slot="label" v-if="$slots.label != null">
                <slot name="label"></slot>
            </template>
            <template slot-scope="scope">
                <el-tooltip class="item" effect="light" popper-class="is-error"
                            :disabled="strings.isBlank(errorMessage)" :content="errorMessage"
                            :visible-arrow="false" placement="bottom">
                    <slot></slot>
                </el-tooltip>
            </template>
        </el-form-item>
        <slot name="append"></slot>
    </div>
</template>

<script>

import propStatic from '../props'

export default {
  name: 'XFormItem',
  inject: [
    '$xform'
  ],
  props: {
    title: String,
    field: String,
    ...propStatic.formItem
  },

  data() {
    return {
      errorMessage: null
    }
  },
  computed: {
    cpBindProps() {
      return {
        prop: this.prop ? this.prop : this.field,
        label: this.label ? this.label : this.title,
        labelWidth: this.labelWidth,
        required: this.required,
        rules: this.rules,
        error: this.error,
        showMessage: this.showMessage,
        inlineMessage: this.inlineMessage,
        size: this.size
      }
    }
  },
  methods: {
    setErrorMessage(message) {
      this.errorMessage = message
    }
  },
  watch: {},
  mounted() {
    this.$xform.setItemRef(this.cpBindProps.prop, this)
  },
  beforeDestroy() {
    this.$xform.removeItemRef(this.cpBindProps.prop)
  }
}
</script>

<style scoped>

</style>
